<template>

  <view class="container">
    <!-- 状态栏 -->
  <!--  <view class="status-bar">
      <view class="location">
        <text>{{ address || "获取中..." }}</text>
        <span style="margin-left: 170px; color: blue;" @tap="getLocation">刷新</span>
      </view>
    </view> -->

    <!-- 功能入口 -->
    <view class="function-grid">
      <view
        v-for="(item, index) in functions"
        :key="index"
        class="function-item"
        @tap="navigateTo(item.path)"
      >
        <image src="/static/logo.png" class="function-icon"/>
        <text>{{ item.name }}</text>
      </view>
    </view>

    <!-- 附近加油站 -->
    <view class="section">
      <view class="section-header">
        <text>附近加油站</text>
        <text class="more">全部</text>
      </view>
      <map
        class="map-container"
        :latitude="latitude"
        :longitude="longitude"
        :show-location="true"
      ></map>
    </view>

    <!-- 优惠团购 -->
    <view class="section">
      <view class="section-header">
        <text>优惠团购</text>
        <text class="more" @tap="gotoPromotions">更多</text>
      </view>
      <scroll-view scroll-x class="scroll-container">
        <view class="promotion-item">
          <image class="promotion-image" src="/static/logo.png"/>
          <image class="promotion-image" src="/static/logo.png"/>
        </view>
      </scroll-view>
    </view>

	<!-- 救援 -->
	<view class="rescue-tou">
	<image class="rescue" src="/static/rescue.png" @click="gotorescue"></image>
	</view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// 响应式数据
const functions = ref([
  { name: '车辆维修', path: '/pages/fixCar/fixCar' },
  { name: '汽车保养', path: '/pages/baoyang/index/index' },
  { name: '专业洗车', path: '/pages/zhuanyexiche/xiche/xiche' },
  { name: '就近加油', path: '/pages/baoyang/jiayou/jiayou' }
]);

const latitude = ref(null);
const longitude = ref(null);
const address = ref("");
// 获取 App 实例
const app = getApp();

onLoad(()=>{
	uni.getLocation({
		type: 'wgs84',
		success: function (res) {
			console.log('当前位置的经度：' + res.longitude);
			console.log('当前位置的纬度：' + res.latitude);

		}
	});

})
// 获取当前位置
const getLocation = () => {
  uni.getLocation({
    type: 'gcj02', // 适用于地图
    success: (res) => {
      latitude.value = res.latitude;
      longitude.value = res.longitude;
	  // **存入 App.vue 全局 geo**
	app.globalData.geo.latitude = res.latitude;
	app.globalData.geo.longitude = res.longitude;


      getAddress(res.latitude, res.longitude);
    },
    fail: (err) => {
      console.error("获取位置失败：", err);
      uni.showToast({
        title: '获取位置失败，请检查权限',
        icon: 'none'
      });
    }
  });
};

// 逆地址解析（可选，需要接入腾讯或高德API）
const getAddress = (lat, lng) => {
  // 这里可以调用地图 API 获取详细地址
  address.value = `纬度: ${lat.toFixed(4)}, 经度: ${lng.toFixed(4)}`;
};

const navigateTo = (path) => {
  uni.navigateTo({
    url: path
  });
}

const gotoPromotions = () => {
  uni.switchTab({
    url: '/pages/promotions/promotions'
  });
}

const gotorescue = () =>{
	uni.navigateTo({
		url:'/pages/rescue/rescue'
	})
}
// 页面加载时获取当前位置
onMounted(() => {
  getLocation();
});
</script>

<style scoped>

.status-bar {
  padding: 10rpx 10rpx;
  padding-top: calc(env(safe-area-inset-top) + 20rpx);
  background: #ffffff;
  position: relative;

}

.rescue-tou{

}

.rescue{
	border-radius: 50%;
	width: 40px;
	height: 40px;
	position: fixed;
	bottom: 20px;
	left: 45%;
}

.container {
  padding-top: 180rpx;
  background: #fff;

}

.refresh-icon {
  width: 36rpx;
  height: 36rpx;
  margin-left: 16rpx;
}


.function-grid {
  display: flex;
  justify-content: space-around;
  padding: 40rpx 0;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.function-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 16rpx;
}

.section {
  margin: 32rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24rpx;
  font-size: 32rpx;
}

.map-container {
  height: 400rpx;
  border-radius: 16rpx;
}

.scroll-container {
  white-space: nowrap;
}

.promotion-item {
  display: inline-block;
  width: 300rpx;
  margin-right: 24rpx;
}

.promotion-image {
  width: 300rpx;
  height: 200rpx;
  border-radius: 8rpx;
}

.tab-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;
  box-shadow: 0 -2rpx 12rpx rgba(0,0,0,0.1);
}

.center-button {
  width: 100rpx;
  height: 100rpx;
  background: #ff0000;
  border-radius: 50%;
  margin-bottom: 40rpx;
}

.tab-icon {
  width: 48rpx;
  height: 48rpx;
}
</style>
